let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let timer;
let dotBox = box.querySelector('.dot_box')


//获取轮播图数据
ajax('GET', "http://studentback.dfbuff.xyz/getMethod", function(res) {
    console.log(res);
    //遍历数组
    res.result.forEach(function(item, idx) {
        //渲染图片
        imgBoxUl.innerHTML += `<li><img src="${item.content}"></li>`;

        //渲染小圆点
        dotBox.innerHTML += `<span class="dot ${idx==0?' dotActive':''}" data-index=${idx+1}></span>`
    });


    // 插入克隆的第一张图片到最后一张图片之后的位置
    imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
    // 插入克隆的第四张图片到第一张之前的位置
    imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);

    // 初始化下标
    let index = 1;
    // 获取上一个操作的index
    let lastIndex = 1;
    // 移动到原来第一张图片的位置
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    setTimeout(function() {
        imgBoxUl.style.transition = "0.2s ease-in-out";
    }, 300);
    let flag = true; // 设置开关, 默认可以打开



    // 事件代理
    box.addEventListener("click", function(event) {
        // 左箭头
        (event.target.className == "arrow_left") && arrowLeftFn(event.target);
        // 右箭头
        (event.target.className == "arrow_right") && arrowRightFn(event.target);
        // 小圆点
        (event.target.classList.contains("dot")) && dotFn(event.target);
    });

    // 点击右箭头事件
    function arrowRightFn(target) {
        if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${++index}00%)`;
            // 判断是否到达最后一张
            limit(imgBoxUl.children.length - 1, 1);
            // 获取具体span标签
            let rBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
            dotColor(rBtnEvent);
        }
    }

    // 点击左箭头事件
    function arrowLeftFn(target) {
        // console.log(target);
        if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${--index}00%)`;
            // 判断是否是第一张
            limit(0, imgBoxUl.children.length - 2);
            // 获取具体span标签
            let lBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
            dotColor(lBtnEvent);
        }
    };

    // 临界点跳转图片
    function limit(limitIndex, setIndex) {
        // limitIndex 设置限制下标
        // setIndex   设置对于下标
        if (index == limitIndex) {
            index = setIndex;
            imgBoxUl.addEventListener("transitionend", function() {
                // 清除过渡效果, 并且ul恢复位置
                imgBoxUl.style.transition = "none";
                imgBoxUl.style.transform = `translateX(-${index}00%)`;

                // 恢复过渡效果
                // 获取最终样式(被计算的样式)
                window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition-duration");
                imgBoxUl.style.transition = "0.2s ease-in-out";
            })
        }
    }

    // 小圆点点击事件
    function dotFn(target) {
        // 获取自定义属性的值，这个值可以和index对应
        let dataIndex = target.getAttribute("data-index");
        // 操作的值重新赋值到index，那么index就可以更新
        // console.log(dataIndex);
        index = dataIndex;
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        // 调用小圆点颜色函数
        dotColor(target);
    };

    // 封装小圆点颜色变化函数
    function dotColor(tag) {
        // console.log(tag);
        tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
        tag.classList.add("dotActive");
        // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
        lastIndex = index;
    };

    // 控制开关
    function flagFn() {
        // 关闭开关
        flag = false;
        imgBoxUl.addEventListener("transitionend", function() {
            flag = true;
        });
    }

    timeFn();

    function timeFn() {
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function() {
            // arrowRightFn(imgBoxUl)
            // console.log(imgBoxUl);
            // arrowLeftFn(target);
        }, 1000);
    }

}, {
    'type': '图片'
});